<template>
    <el-dialog @close="handleClose" :visible="visible" width="100%" fullscreen :show-close="false">
        <!-- <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100" >

        </scale-box> -->
        <div class="customerIndex">
                <div class="indexTitle">
                    <span class="indexTitleWord">运营数据大屏</span>
                    <!-- <div class="indexTitleTile">2024年5月1日 12:65 星期二</div> -->
                    <div class="indexTitleTime">{{ currentTimeDate }}</div>
                </div>
                <div class="indexNav">
                    <div class="navTitle">数据汇总</div>
                    <div class="navItem" v-for="(item, index) in navList" :key="index">
                        <div class="navItemTitle">
                            <img class="navItemTitleImg" src="~@/static/customer/index05.png" alt="">
                            <span class="navItemTitleWord">{{ item.name }}</span>
                        </div>
                        <div class="navItemNum">{{ item.num }}</div>
                    </div>
                </div>
                <div class="indexBody">
                    <div class="indexBodyItem">
                        <div class="indexBodyItemTitle">客户对接统计</div>
                        <div class="histogram" v-loading="loadingHistogram">
                            <histogram-data ref="histogramRef" echartsId="2"></histogram-data>
                        </div>
                    </div>
                    <div class="indexBodyItem">
                        <div class="indexBodyItemTitle">客户签约数量</div>
                        <!-- 折线图 -->
                        <div class="lineChart" v-loading="loadingLineChart">
                            <div class="lineChart_head">
                                <div class="lineChart_head_time">
                                    <el-date-picker v-model="lineChartTime" type="daterange" value-format="yyyy-MM-dd"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        unlink-panels>
                                    </el-date-picker>
                                </div>
                                <div class="lineChart_head_but">
                                    <el-button type="primary" @click="query">查询</el-button>
                                    <!-- <el-button type="primary">重置</el-button> -->
                                </div>
                            </div>
                            <line-chart-data class="lineChartBox" ref="lineChartRef" echartsId="2"></line-chart-data>
                        </div>
                    </div>
                </div>
            </div>
    </el-dialog>

</template>
<script>
// import ScaleBox from "vue2-scale-box";
// api
import HistogramData from "./histogramData";
import LineChartData from "./lineChartData";
import {
    clientDataBoardBusiness,
    clientDataBoardCustomer,
    clientDataBoardContract
} from "@/api/customer/customerIndex";
export default {
    props: {
        visible: Boolean,
    },
    components: {
        HistogramData,
        LineChartData,
        // ScaleBox
    },
    data() {
        return {
            loading: false,
            navList: [
                { id: 0, name: '已签约客户数', num: 0 },
                { id: 1, name: '已报备未签约客户数', num: 0 },
                { id: 2, name: '今日跟进客户数', num: 0 },
                { id: 3, name: '昨日跟进客户数', num: 0 },
                { id: 4, name: '2-5天未跟进客户数', num: 0 },
                { id: 5, name: '5天以上未跟进客户数', num: 0 },
            ],
            loadingLineChart: false,
            loadingHistogram: false,
            currentTimeDate: '',//当前时间日期
            timerId: '',
            lineChartTime: [], //开始时间 、结束时间
            clientWidth:'',//实时屏幕宽度
            clientHeight:'',//实时屏幕高度
        };
    },
    created() {
        this.clientWidth = document.documentElement.clientWidth  //实时屏幕宽度
        this.clientHeight = document.documentElement.clientHeight   //实时屏幕高度
        this.$set(this.lineChartTime, 0, this.getTime(1)); // 当月第一天
        this.$set(this.lineChartTime, 1, this.getTime()); //当天
        this.getClientDataBoardBusiness() //商务数据统计
        this.getClientDataBoardCustomer(); //客户对接统计

        this.getClientDataBoardContract();
        // 获取当前日期 动态刷新
        let setTimeoutTime = res => {
            this.getTimeNow()
            this.timerId = setTimeout(setTimeoutTime, 1000)
        }
        setTimeoutTime()
    },
    methods: {
        // 获取当前日期 动态刷新
        getTimeNow() {
            // 获取Date()对象
            let date = new Date()
            // 获取当前事件的年份转为字符串
            let year = date.getFullYear().toString()
            // 获取月份，注意：月份默认从0开始，所以要+1
            let month = (date.getMonth() + 1).toString().padStart(2, '0');
            // 获取天，
            let day = date.getDate().toString().padStart(2, '0');
            // 获取时
            let hour = date.getHours().toString().padStart(2, '0');
            // 获取分
            let minute = date.getMinutes().toString().padStart(2, '0');
            // 获取秒
            let second = date.getSeconds().toString().padStart(2, '0');
            // 拼接时间
            // 例如：1号：00:00:00，当日：当前时间
            // 举例：2022-09-01 00:00:00   2022-09-29 13:39:29
            // let time = year + '-' + month + '-' + day + ' ' +  hour + ':' + minute + ':' + second// 当天
            let time = year + '年' + month + '月' + day + '日 ' + hour + ':' + minute // 当天

            let dayStrArray = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
            let week = date.getDay();

            this.currentTimeDate = time + ' ' + dayStrArray[week]
            // 例如：1号：00:00:00 当日：23:59:59
            // 举例：2022-09-01 00:00:00   2022-09-29 23:59:59
            // let begin = year + '-' + month + '-01' + ' 00:00:00' // 当月第一天
            // let end = year + '-' + month + '-' + day + ' 23:59:59' // 当天
        },
        // 获取当前日期
        getTime(index = '') {
            // 获取Date()对象
            let date = new Date()
            // 获取当前事件的年份转为字符串
            let year = date.getFullYear().toString()
            // 获取月份，注意：月份默认从0开始，所以要+1
            let month =
                date.getMonth() + 1 < 10
                    ? '0' + (date.getMonth() + 1).toString()
                    : (date.getMonth() + 1).toString()
            // 获取天，
            let day =
                date.getDate() < 10
                    ? '0' + date.getDate().toString()
                    : date.getDate().toString()
            // 拼接时间
            // 例如：1号：00:00:00，当日：当前时间
            // 举例：2022-09-01 00:00:00   2022-09-29 13:39:29
            let begin = year + '-' + month + '-01' // 当月第一天
            let end = year + '-' + month + '-' + day // 当天
            if (index == 1) {
                return begin
            } else {
                return end
            }
            // 例如：1号：00:00:00 当日：23:59:59
            // 举例：2022-09-01 00:00:00   2022-09-29 23:59:59
            // let begin = year + '-' + month + '-01' + ' 00:00:00' // 当月第一天
            // let end = year + '-' + month + '-' + day + ' 23:59:59' // 当天
        },
        //商务数据统计
        async getClientDataBoardBusiness() {
            var res = await clientDataBoardBusiness()
            let result = res.result
            this.navList[0].num = result.clientNum
            this.navList[1].num = result.unsignedClientFilingNum
            this.navList[2].num = result.todayClientNum
            this.navList[3].num = result.yesterdayClientNum
            this.navList[4].num = result.notFollowClient2
            this.navList[5].num = result.notFollowClient5
        },
        // 客户对接统计
        async getClientDataBoardCustomer() {
            // console.log(555555555555)
            this.loadingHistogram = true
            try {
                var res = await clientDataBoardCustomer()
                let result = res.result
                this.$nextTick(() => {
                    this.loadingHistogram = false
                    this.$refs.histogramRef.getDataList(result)
                })
            } catch (error) {
                this.loadingHistogram = false
            }
        },
        // 查询 折线图查询
        query() {
            // console.log('this.date',this.date)
            if (this.lineChartTime) {
                this.getClientDataBoardContract()
            } else {
                this.$message.error('请选择签约数量统计时间')
            }
        },
        // 折线图交易数据汇总
        getClientDataBoardContract() {
            this.loadingLineChart = true
            let data = {
                beginTime: this.lineChartTime[0],
                endTime: this.lineChartTime[1],
            }
            //用户数量和商家数量
            clientDataBoardContract(data).then((res) => {
                this.$nextTick(() => {
                    this.loadingLineChart = false
                    let result = res.result
                    this.$refs.lineChartRef.getDataList(result)
                })
            }).catch(error => {
                this.loadingLineChart = false
            })
        },
        //取消
        handleClose(formName) {
            // 在延迟时间未到达之前，清除定时器
            clearTimeout(this.timerId);
            this.$emit('update:visible', false)
            // this.$refs[formName].resetFields();
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep {
    .el-dialog__header {
        display: none;
    }

    .el-dialog__body {
        padding: 0;
    }

    .customerIndex {
        width: 100%;
        // min-height: 100vh;
        min-height: 1080px;
        background: url('~@/static/customer/index01.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .indexTitle {
        width: 100%;
        height: 80px;
        background: url('~@/static/customer/index03.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-top: 7px;
        text-align: center;
        position: relative;

        .indexTitleWord {
            font-size: 41px;
            font-weight: 700;
            line-height: 56.25px;
            letter-spacing: 0.11em;
            box-sizing: border-box;
            color: #FFFFFF;
            text-shadow: 2px 3px 0px #001E6A;
        }

        .indexTitleTime {
            position: absolute;
            font-size: 17px;
            line-height: 23.32px;
            right: 39px;
            top: 40px;
            color: #FFFFFF;
        }
    }

    .indexNav {
        width: 1720px;
        height: 216px;
        background: url('~@/static/customer/index06.png');
        // background: red;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        margin-top: 30px;
        position: relative;
        padding-top: 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 0 79px 0 99px;

        .navTitle {
            width: 180px;
            height: 66px;
            background: url('~@/static/customer/index04.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-family: Alibaba PuHuiTi;
            font-size: 20px;
            font-weight: 700;
            line-height: 27.44px;
            letter-spacing: 0.09em;
            text-align: center;
            line-height: 66px;
            color: #FFFFFF;
            padding-right: 13px;
            box-sizing: border-box;
            position: absolute;
            left: 87px;
            top: -33px;
        }

        .navItem {
            width: 214px;
            height: 107px;
            background: url('~@/static/customer/index08.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;

            .navItemTitle {
                padding-top: 9px;
                padding-left: 12px;

                .navItemTitleImg {
                    width: 10px;
                    height: auto;
                    margin-right: 4px;
                }

                .navItemTitleWord {
                    font-size: 14px;
                    color: #2CA6FF;
                }
            }

            .navItemNum {
                flex: 1;
                padding-top: 13px;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                // align-items: center;
                line-height: 44.66px;
                font-size: 32px;
                color: #FFE21D;
                font-weight: bold;
                // background: url('~@/static/customer/index08.png');
                // background-repeat: no-repeat;
                // background-size: 100% 100%;
            }

        }

    }

    .indexBody {
        width: 100%;
        // padding: 0 100px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        // justify-content: space-between;
        margin-top: 45px;

        .indexBodyItem {
            width: 800px;
            height: 499px;
            background: url('~@/static/customer/index02.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;

            &:first-child {
                width: 860px;
                margin-right: 45px;
            }

            .indexBodyItemTitle {
                width: 230px;
                height: 66px;
                background: url('~@/static/customer/index07.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                font-size: 20px;
                font-weight: 700;
                // line-height: 27.44px;
                letter-spacing: 0.15em;
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                padding-right: 20px;
                box-sizing: border-box;
                margin: 11px 0 0 10px;
            }

            .histogram {
                width: 100%;
                flex: 1;
                padding-top: 20px;
                box-sizing: border-box;
            }
        }
    }

    /* 表格统计 */
    .lineChart {
        width: 100%;
        flex: 1;
        box-sizing: border-box;
        margin: 15px auto 0 auto;
        display: flex;
        flex-direction: column;
    }

    .lineChart_head {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 32px;
        margin-bottom: 20px;
    }

    .lineChart_head_title {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        margin-right: 15px;
    }

    .lineChart_head_lable {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        margin-right: 13px;
    }

    .lineChart_head_time {
        margin: 0 8px;
        height: 100%;
        margin-left: 33px;

        .el-date-editor {
            width: 260px;
            height: 100%;
            background: #0C2C8F;
            border: none;
            box-shadow: 0px 0px 1px 0px #48DEFF inset;

            .el-range-input {
                background: #0C2C8F;
                color: #FCFDFF;
            }

            .el-range-separator {
                color: #FCFDFF;
            }
        }
        .el-icon-date{
            color: #52D6FF;
        }
    }

    .lineChart_head_but {
        margin-left: 24px;
        height: 100%;

        .el-button {
            width: 65px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            // line-height: 32px;
            padding: 0;
            color: #FFFFFF;
            font-size: 15px;
            background-color: #1B5BFF;
            border: none;
        }
    }

    .lineChartBox {
        flex: 1;
        height: 0;
    }

    // end

}
</style>